import echarts from "echarts";
//饼图颜色
const pieColor = [
  "#0094ff",
  "#02d88b",
  "#ed6d00",
  "#fabf00",
  "#aacd06",
  "#de4b66",
  "#6741d9",
  "#004ea2",
  "#14a83d",
  "#fed900",
  "#fabf00",
  "#ed6d00",
  "#a40182",
];
const tooltip = {
  // backgroundColor: 'rgba(9,32,75,.9)',
  // borderWidth: 1,
  // borderColor: 'rgba(94,183,255)', //是否是rgba
  // textStyle: {
  //     color: 'rgb(94,183,255)'
  // }
};

const dataZoom = {
  type: "slider",
  filterMode: "none",
  height: 10,
  bottom: 0,
  borderColor: "#ebedf0", //滑块边框
  backgroundColor: "#ebedf0", //滑块背景色
  fillerColor: "rgba(8,134,237)", //内部滑块背景色
  textStyle: {
    color: "#777", //滑块字体颜色
  },
};

export default {
  dataZoom,
  //默认配置
  defaultConfig: {
    legend: {
      textStyle: {
        color: "#777",
      },
      // pageIconColor: '#fff',
      // pageIconInactiveColor: '#555',
      // pageTextStyle: {
      //     color: '#fff'
      // }
    },
    grid: {
      left: 30,
      right: 30,
      bottom: 15,
      containLabel: true,
    },
    xAxis: {
      axisLabel: {
        color: "#777",
      },
      axisLine: {
        lineStyle: {
          color: "#ddd",
        },
      },
      axisTick: false,
    },
    yAxis: {
      splitNumber: 4,
      nameTextStyle: {
        color: "#777",
      },
      axisLabel: {
        color: "#777",
      },
      splitLine: {
        lineStyle: {
          lineStyle: {
            color: "rgba(142,227,255,.1)",
          },
        },
      },
    },
    tooltip,
  },
  //默认series配置
  defaultSeries: {
    //饼图
    pie: {
      startAngle: 270,
      center: ["50%", "40%"],
      radius: ["45%", "60%"],
      label: {
        show: false,
      },
      itemStyle: {
        color: (p) => pieColor[p.dataIndex],
      },
    },
    //柱状图
    bar: {
      barWidth: 15,
      barGap: "15%",
      barCategoryGap: "30%",
    },
    //折线图
    line: {
      symbol: "none",
    },
  },
  //主题
  theme: {
    //字体大小
    fontSize14: {
      xAxis: {
        axisLabel: {
          fontSize: 14,
        },
      },
      yAxis: {
        axisLabel: {
          fontSize: 14,
        },
      },
      textStyle: {
        fontSize: 14,
      },
    },
    fontSize16: {
      xAxis: {
        axisLabel: {
          fontSize: 16,
        },
      },
      yAxis: {
        axisLabel: {
          fontSize: 16,
        },
      },
      textStyle: {
        fontSize: 16,
      },
    },
    zoomIn: {
      xAxis: {
        axisLabel: {
          fontSize: 16,
        },
      },
      yAxis: {
        axisLabel: {
          fontSize: 16,
        },
      },
      series: {
        barWidth: 30,
      },
      textStyle: {
        fontSize: 16,
      },
    },
    zoomInMutipleBar: {
      xAxis: {
        axisLabel: {
          fontSize: 16,
        },
      },
      yAxis: {
        axisLabel: {
          axisLabel: {
            fontSize: 16,
          },
        },
      },
      textStyle: {
        fontSize: 16,
      },
    },
  },
  //series主题
  seriesTheme: {
    pie: {
      red: {
        itemStyle: {
          color: (p) => {
            return pieColor[p.dataIndex + 1];
          },
        },
      },
    },
    bar: {
      default: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#77bbff",
            },
            {
              offset: 1,
              color: "#5c88fe",
            },
          ]),
        },
      },
      orange: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#fed993",
            },
            // {
            //     offset:0.5,
            //     color:'#de7753'
            // },
            {
              offset: 1,
              color: "#fd9259",
            },
          ]),
        },
      },
      deepBlue: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#e272c9",
            },
            {
              offset: 1,
              color: "#61206d",
            },
          ]),
        },
      },
      deepOrange: {
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#6ed08d",
            },
            {
              offset: 1,
              color: "#3b704d",
            },
          ]),
        },
      },
    },
    line: {
      default: {
        itemStyle: {
          color: "rgba(39,205,255,1)",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(39,205,255,.5)",
            },
            {
              offset: 1,
              color: "rgba(39,205,255,0)",
            },
          ]),
        },
      },
      orangeShadow: {
        itemStyle: {
          color: "#fff100",
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(135,119,65,.5)",
            },
            {
              offset: 1,
              color: "rgba(135,119,65,0)",
            },
          ]),
        },
      },
      orange: {
        itemStyle: {
          color: "#fea91c",
        },
        areaStyle: null,
      },
      blue: {
        symbol: "circle",
        itemStyle: {
          color: "#297af8",
        },
        areaStyle: null,
      },
      green: {
        symbol: "circle",
        itemStyle: {
          color: "#02d578",
        },
        areaStyle: null,
      },
      red: {
        itemStyle: {
          color: "#ff0000",
        },
        areaStyle: null,
      },
    },
  },
  //多图表默认series主题配置
  mutipleChartSeriesThemeConfig: {
    bar: ["default"],
    "bar,bar": ["default", "orange"],
    "bar,bar,bar": ["default", "orange", "deepBlue"],
    "bar,bar,bar,bar": ["default", "orange", "deepBlue", "deepOrange"],
    "bar,bar,line": ["default", "orange", "orange"],
    "bar,bar,bar,line": ["default", "orange", "deepBlue", "orange"],
    "bar,bar,bar,bar,line": [
      "default",
      "orange",
      "deepBlue",
      "deepOrange",
      "orange",
    ],
    "bar,line": ["default", "orange"],
    "bar,line,line": ["orange", "default", "orangeShadow"],
    line: ["default"],
    "line,line": ["orange", "green"],
    "line,line,line": ["blue", "green", "orange"],
  },
};
